<template>
  <el-dialog :visible.sync="dialogVisible"
             :title="title"
             :before-close="handleClose"
             :close-on-click-modal="false"
             :lock-scroll="false"
             width="750px">
    <div class="explanation">我要举报当前页面内容 原因为：</div>
    <el-radio-group v-model="radio"
                    class="report-radio"
                    @change="change">
      <el-radio v-for="(item,index) in list"
                :label="index"
                :key="index">
        <span class="report-item-header">{{item.title}}：</span>
        <span class="report-item-desc">{{item.desc}}</span>
      </el-radio>
    </el-radio-group>
    <el-input v-model="form.content"
              class="custom-report-content"
              type="textarea"
              placeholder="请提供详细说明"
              :rows="3"></el-input>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="close"
                 size="small">取 消</el-button>
      <el-button type="primary"
                 @click="submit"
                 size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { ITEM_REPORT_LIST } from './list'
import { report } from './api'

export default {
  name: 'report',
  data () {
    return {
      title: '举报',
      dialogVisible: false,
      radio: 0,
      form: {
        type: '',
        desc: '',
        content: ''
      },
      params: {}
    }
  },
  computed: {
    list () {
      return ITEM_REPORT_LIST;
    }
  },
  methods: {
    handleClose (done) {
      done()
    },
    open (type, params = {}) {
      this.form.type = type;
      this.params = params;
      this.dialogVisible = true
      return new Promise((resolve) => {
        this._resolve = resolve
      })
    },
    change (index) {
      const { title, desc } = this.list[index]
      this.form.desc = `${title}：${desc}`
    },
    async submit () {
      const { form: { type, desc, content }, params } = this
      const url = window.location.href;
      const body = { type, content: `(${desc})${content}`, params, url }
      await report(body)
      this._resolve({ body })
      this.close()
      this.$message({
        message: '举报已提交 管理员将尽快处理',
        type: 'success',
        offset: 10
      })
    },
    close () {
      this.dialogVisible = false
      this.radio = 0
      this.form = {
        type: '',
        desc: '',
        content: ''
      }
      this.params = {}
    }
  }
}
</script>

<style lang="scss" scoped>
.explanation {
  margin: -15px 0 10px 0;
  color: #6f777b;
}
.report-radio {
  display: flex;
  flex-direction: column;
  .el-radio {
    margin: 5px 0;
  }
}
.report-item-header {
  font-weight: 550;
}
.report-item-desc {
  font-weight: 350;
}
.custom-report-content {
  margin-top: 10px;
}
.dialog-footer {
  text-align: center;
}
</style>